
<div class="col-lg-12">
<div class="row animated fadeInRight">
<form id="search_loc_form" class="form-horizontal"  method="post">
    <div class="ibox-content">
        
        <div class="form-inline form-group" >
              <div><label class="col-lg-2 control-label">Area</label>
                  <div class="col-lg-3">
                    <select name="areas" class="chosen-select" id="area">
                        <option value=""></option>
                        <?php foreach ($zone1 as $key): ?>
                            <option value="<?php echo $key->zone_name; ?>"><?php echo $key->zone_name; ?></option>
                        <?php endforeach;?>
                    </select>
                  </div>
              </div>
              <div><label class="col-lg-2 control-label">Range</label>
                  <div class="col-lg-3">
                    <select name="" class="chosen-select" id="range">
                        <option value="bill">Billing Progress</option>
                        <?php foreach ($ranges as $key): ?>
                            <option value="<?php echo $key->range_mark_id; ?>"><?php echo $key->range_from.' - '.$key->range_to; ?></option>
                        <?php endforeach;?>
                        <option value="all">All Ranges</option>
                    </select>
                  </div>
              </div>
              <div><a  id="getTr" class="btn btn-sm btn-primary save-btn-tab">Show Locations</a></div>
        </div>
    </div>   

</form>
    <div class="ibox-content">
        <div class="form-group" id="legend">
            <?php foreach ($ranges as $key): ?>
                            <img alt="image" class="img-circle" src="<?php echo base_url('assets/img/').'/'.$key->meaning; ?>" style="width:20px; height:20px; margin-left:100px;" />
                            <label class="control-label"> = <?php echo $key->range_from.' - '.$key->range_to; ?></label>
            <?php endforeach;?>
                
               <!--  <label class="control-label"> - Range</label>
                <img alt="image" class="img-circle" src="<?php echo base_url('assets/img/map-blue.png'); ?>" style="width:20px; height:20px; margin-left:20px;" />
                <label class="control-label"> - Range</label> -->
        </div>
        
        <div id="map_wrapper" style="height: 450px;">
            <div id="map_canvas" class="mapping" style="width: 100%;height: 100%;">
            </div>
        </div>
    </div>
  </div>
</div>
  <script>
   $(document).ready(function(){
     $(".chosen-select").chosen({width:"71%;"});
     $('#legend').hide();
    var markers = [];
    var colors = new Array();
    var vehicles = new Array();
    var pinImage1 = new google.maps.MarkerImage("<?php echo base_url('assets/img/map-marker.svg'); ?>",
        new google.maps.Size(29, 39),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 38));  
    var pinImage2 = new google.maps.MarkerImage("<?php echo base_url('assets/img/map-marker.png'); ?>",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinImages = {
        url: "<?php echo base_url('assets/img/map-markerz2.svg'); ?>", // image is 512 x 512
        scaledSize : new google.maps.Size(25, 39),
    };
    var pinImage = {
        url: "<?php echo base_url('assets/img/map-light-blue.png'); ?>",
                scaledSize: new google.maps.Size(25,39)
    }
    var pinImagess = {
        url: "<?php echo base_url('assets/img/map-dark-blue.png'); ?>",
                scaledSize: new google.maps.Size(25,39)
    }
    var pinImagesss = {
        url: "<?php echo base_url('assets/img/map-purple.png'); ?>",
                scaledSize: new google.maps.Size(25,39)
    }

    // var pinImages = {
    //     url: "<?php echo base_url('assets/img/map-marker.png'); ?>", // image is 512 x 512
    //     scaledSize : new google.maps.Size(25, 39),
    // };
    // var pinImage = {
    //     url: "<?php echo base_url('assets/img/map-markerz2.svg'); ?>",
    //             scaledSize: new google.maps.Size(25,39)
    // }

    /*var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|37e84e",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));*/

    var map;
    initialize();
    function initialize() {
           var mapProp = {
            center:new google.maps.LatLng(7.2002457,124.2400509),
            zoom:17,
            mapTypeId:google.maps.MapTypeId.SATELITE
          };
          map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);
           

          // map.addListener('click', function(e) {
          //   placeMarkerAndPanTo(e.latLng, map);
          // });  
        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        }

    function billedMarkings(data){
        var pinImg = {
            url: "<?php echo base_url('assets/img/map-marker.png'); ?>", // image is 512 x 512
            scaledSize : new google.maps.Size(25, 39),
        };
        var pinImg2 = {
            url: "<?php echo base_url('assets/img/map-markerz2.svg'); ?>",
            scaledSize: new google.maps.Size(25,39)
        }

        $.each(data, function(i,items){
             if(data[i].flag == "YES"){
                var marker = new google.maps.Marker({
                position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
                title:"("+data[i].acct_num+")"+data[i].acct_name,
                icon: pinImg2,
                map: map
                });
                markers.push(marker);
            }else{
                var marker = new google.maps.Marker({
                position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
                title:"("+data[i].acct_num+")"+data[i].acct_name,
                icon:pinImg,
                map: map
                });
                markers.push(marker);
            }
        });

    }



    function allRanges(data,dat){
        $('#legend').show();
          $.each(data, function(i,items){
            $.each(dat, function(e,items){
                if(data[i].consumed < parseInt(dat[e].range_to) && data[i].consumed > parseInt(dat[e].range_from)){
                    var pinIc = {
                    url: "<?php echo base_url('assets/img/'); ?>"+'/'+dat[e].meaning,
                            scaledSize: new google.maps.Size(25,39)
                }
                var marker = new google.maps.Marker({
                position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
                title:"("+data[i].acct_num+"-"+data[i].consumed+")"+data[i].acct_name,
                icon: pinIc,
                map: map
                });
                markers.push(marker);
                } 
            });
          });
    }

    function placeMarkers(data){

        var dat = <?php echo json_encode($ranges); ?>;
        var range_from;  var range_to;  var marks;
            if($('#range').val() == 'bill'){
                billedMarkings(data);
            }else if($('#range').val() == 'all'){
                allRanges(data,dat);
            }
            else{
                $.each(dat, function(e,items){
                    if($('#range').val() == dat[e].range_mark_id){
                        range_from  = parseInt(dat[e].range_from);
                        range_to    = parseInt(dat[e].range_to);
                        marks       = dat[e].meaning;
                    }
                });
            }

        //alert(range_from+' - '+range_to);
        $.each(data, function(i,items){
            if(data[i].consumed < range_to && data[i].consumed > range_from){
                var pinIc = {
                    url: "<?php echo base_url('assets/img/'); ?>"+'/'+marks,
                            scaledSize: new google.maps.Size(25,39)
                }
                var marker = new google.maps.Marker({
                position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
                title:"("+data[i].consumed+")"+data[i].acct_name,
                icon: pinIc,
                map: map
                });
                markers.push(marker);
            }


            // if(data[i].consumed < 11){
            //     var marker = new google.maps.Marker({
            //     position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
            //     title:"("+data[i].consumed+")"+data[i].acct_name,
            //     icon: pinImages,
            //     map: map
            //     });
            //     markers.push(marker);
            // }else if(data[i].consumed < 31 && data[i].consumed > 10){
            //     var marker = new google.maps.Marker({
            //     position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
            //     title:"("+data[i].consumed+")"+data[i].acct_name,
            //     icon: pinImage,
            //     map: map
            //     });
            //     markers.push(marker);
            // }else if(data[i].consumed < 51 && data[i].consumed > 30){
            //     var marker = new google.maps.Marker({
            //     position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
            //     title:"("+data[i].consumed+")"+data[i].acct_name,
            //     icon: pinImagess,
            //     map: map
            //     });
            //     markers.push(marker);
            // }else{
            //     var marker = new google.maps.Marker({
            //     position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
            //     title:"("+data[i].consumed+")"+data[i].acct_name,
            //     icon: pinImagesss,
            //     map: map
            //     });
            //     markers.push(marker);
            // }

            // if(data[i].flag == "YES"){
                // var marker = new google.maps.Marker({
                // position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
                // title:"("+data[i].acct_num+")"+data[i].acct_name,
                // icon: pinImages,
                // map: map
                // });
                // markers.push(marker);
            // }else{
            //     var marker = new google.maps.Marker({
            //     position:new google.maps.LatLng(data[i].loc_latitude,data[i].loc_longitude),
            //     title:"("+data[i].acct_num+")"+data[i].acct_name,
            //     icon:pinImage,
            //     map: map
            //     });
            //     markers.push(marker);
            // }
        });
    }

    
    $('#getTr').click(function (){
        $('#legend').hide();
        DeleteMarkers();
        $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax').'/get_locations'); ?>" ,
            method: 'POST',
            data: $('#search_loc_form').serialize(),
            dataType: 'json',
            success: function(data){
                placeMarkers(data);
                
            }

        });
    });
    function DeleteMarkers() {
        //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers = [];
    }


 


   });
  </script>